<template>
	<div id="echarts3" class="echarts3" ref="echartsRef"></div>
</template>

<script>
import echarts from "echarts";
export default {
	name: 'chartTable3',
	props: {
		chart: Object // 接收单个图表数据对象
	},
	data() {
		return {
			option: {},
			myChart: null,
			// chart: {
			// 	depthData: [],
			// 	currentData: [],
			// 	timeData: [],
			// 	drillingSpeedData: [],
			// },
		}
	},
	watch: {
		chart: {
			handler() {
				this.renderChart() // 数据变化时，重新渲染图表
			},
			deep: true, // 确保能够监听到对象内部的变化
			// immediate: true // 初始时就渲染一次
		}
	},
	components: {},
	mounted() {
		this.myChart = echarts.init(document.getElementById('echarts3'))
		this.renderChart()
		window.addEventListener('resize', this.handleResize)
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.handleResize)
		this.myChart && this.myChart.dispose()
	},
	methods: {
		renderChart() {
			// console.log('初次调用');
			this.option = {
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					top: 42,
					bottom: 50,
				},
				legend: {
					data: ['深度(m)', '前后偏差',],
					bottom: 10,
					textStyle: {
						color: '#000'
					}
				},
				xAxis: {
					type: 'category',
					data: this.chart.timeData
				},
				yAxis: [
					{
						type: 'value',
						name: '深度(m)',
						position: 'left',
						axisLabel: {
							show: true,
							formatter: function (value) {
								return parseFloat(value).toFixed(2)
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#ffc931'
							}
						}
					},
					{
						type: 'value',
						name: '前后偏差',
						position: 'right',
						axisLabel: {
							show: true,
							formatter: function (value) {
								return parseFloat(value).toFixed(2)
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#ec4899'
							}
						}
					},
					// {
					// 	type: 'value',
					// 	name: '左右偏差',
					// 	position: 'right',
					// 	offset: 90,
					// 	axisLabel: {
					// 		show: true,
					// 		formatter: function (value) {
					// 			return parseFloat(value).toFixed(2)
					// 		}
					// 	},
					// 	axisLine: {
					// 		show: true,
					// 		lineStyle: {
					// 			color: '#ef4444'
					// 		}
					// 	}
					// }
				],
				series: [
					{
						name: '深度(m)',
						type: 'line',
						data: this.chart.depthData,
						yAxisIndex: 0,
						showSymbol: false,
						lineStyle: {
							color: '#ffc931'
						},
						itemStyle: {
							color: '#ffc931'
						}
					},
					{
						name: '前后偏差',
						type: 'line',
						data: this.chart.frontBackAngleDeviationData,
						yAxisIndex: 1,
						showSymbol: false,
						lineStyle: {
							color: '#ec4899'
						},
						itemStyle: {
							color: '#ec4899'
						}
					},
					// {
					// 	name: '左右偏差',
					// 	type: 'line',
					// 	data: this.chart.leftRightAngleDeviationData,
					// 	yAxisIndex: 2,
					// 	showSymbol: false,
					// 	lineStyle: {
					// 		color: '#ef4444'
					// 	},
					// 	itemStyle: {
					// 		color: '#ef4444'
					// 	}
					// }
				]
			}
			this.myChart && this.myChart.setOption(this.option, true)
		},
		handleResize() {
			this.myChart && this.myChart.resize()
		}
	},
}
</script>

<style>
.echarts3 {
	width: 100%;
	height: 100%;
}
</style>